บทความ
Dio package การกำหนด options BaseOptions, queryParameters ในการส่ง request แบบ GET
การกำหนด options BaseOptions, queryParameters ในการส่ง request แบบ GET ใน Dio package สามารถทำได้ดังนี้
ตัวอย่างที่ 1 :
import 'package:flutter/material.dart';import 'package:dio/dio.dart';
class ApiExample extends StatefulWidget { @override _ApiExampleState createState() => _ApiExampleState();}
class _ApiExampleState extends State<ApiExample> { List<dynamic> _posts = [];
@override void initState() { super.initState(); _fetchPosts(); }
Future<void> _fetchPosts() async { try { final dio = Dio(BaseOptions( baseUrl: 'https://jsonplaceholder.typicode.com', connectTimeout: 5000, // 5 seconds receiveTimeout: 5000, // 5 seconds headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', }, ));
final response = await dio.get('/posts', queryParameters: { 'userId': 1, }, options: Options( headers: { 'Authorization': 'Bearer token', }, ));
if (response.statusCode == 200) { setState(() { _posts = response.data; }); } else {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Error fetching posts')),
);
} } catch (error) { //print('Error fetching posts: $error');
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Error fetching posts: $error')),
); } }
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('API Example'), ), body: ListView.builder( itemCount: _posts.length, itemBuilder: (BuildContext context, int index) { final post = _posts[index]; return ListTile( title: Text(post['title']), subtitle: Text(post['body']), ); }, ), ); }}
ในตัวอย่างโค้ดข้างต้น ฟังก์ชัน _fetchPosts จะกำหนด options ด้วย BaseOptions ซึ่งระบุค่าเช่น baseUrl, connectTimeout, receiveTimeout, และ headers สำหรับการเชื่อมต่อ API ดังนี้
final dio = Dio(BaseOptions( baseUrl: 'https://jsonplaceholder.typicode.com', connectTimeout: 5000, // 5 seconds receiveTimeout: 5000, // 5 seconds headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', },));
ฟังก์ชัน _fetchPosts ยังใช้ queryParameters เพื่อระบุค่า userId สำหรับการเรียก API เพิ่มเติม ดังนี้
final response = await dio.get('/posts', queryParameters: { 'userId': 1,}, options: Options( headers: { 'Authorization': 'Bearer token', },));
สุดท้าย ฟังก์ชัน build จะใช้ ListView.builder เพื่อแสดงผลข้อมูลที่ได้จาก API ตามปกติ
หนังสือพัฒนาตัวเอง
จุดเริ่มต้นที่ชัดเจน




เพิ่มลงตะกร้า